<template>
  <el-container>
    <!-- 顶部导航 -->
    <el-header>
      <div>
        <h2>工资总额看板</h2>
      </div>
    </el-header>

    <!-- 主内容区域 -->
    <el-main>
      <!-- 指标卡片部分 -->
      <div class="top-wrapper">
        <ul>
          <li v-for="item in cardsJson">
            <HeadCard
                :cardValue="item.value"
                :title="item.title"
                :unit="item.unit"
                :completion-rate="item.completionRate"
                :status="item.status"
            />
          </li>
        </ul>
      </div>

      <!-- 图表部分 -->
      <div class="content-cockpit">
        <div class="info-card left-card">
          <div class="info-card-title">看人工成本投产</div>
          <div class="info-card-content">
            <div>
              <div class="sub-card-title">看构成</div>
              <Echarts-Pie style="width: 350px; height: 250px"/>
            </div>
            <div class="divider"/>
            <div>
              <div class="sub-card-title">看投产</div>
              <DashboardProduction style="width: 250px; height: 170px"/>
            </div>
          </div>
        </div>
        <div class="info-card right-card">
          <div class="info-card-title">看过程执行</div>
          <div class="info-card-content">
            <Echarts-Graph style="width: 800px;height: 300px"/>
          </div>
        </div>
      </div>

      <div class="content-cockpit">
        <div class="info-card bottom-card">
          <div class="info-card-title">看监测分析</div>
          <div class="info-card-content">
            <div>
              <div class="sub-card-title">看超发</div>
              <ExceedingBudget style="width: 350px ;height: 170px"/>
            </div>
            <div class="divider"/>
            <div>
              <div class="sub-card-title">比历史</div>
              <comparative-history style="width: 600px ;height: 100px"/>
            </div>
            <div class="divider"/>
            <div>
              <div class="sub-card-title">比对标</div>
              <Echarts-Matrix-Scatter style="width: 450px; height: 200px"/>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import cardsJson from '@/json/page2/headCard.json';
import HeadCard from "@/components/HeadCard.vue";
import EchartsGraph from "@/components/Echarts-Graph.vue";
import EchartsPie from "@/components/Echarts-Pie.vue";
import DashboardProduction from "@/components/dashboard-production.vue";
import ExceedingBudget from "@/components/exceeding-budget.vue";
import ComparativeHistory from "@/components/comparative-history.vue";
import EchartsMatrixScatter from "@/components/Echarts-Matrix-Scatter.vue";
</script>

<style scoped>
.top-wrapper ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.top-wrapper li {
  width: 20%;
  list-style: none;
  padding-right: 25px;
}

.top-wrapper li:last-child {
  padding-right: 0;
}

.info-card {
  background: #FDFEFE;
  box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}

.info-card.left-card {
  width: 50%;
  height: 386px;
  margin-right: 30px;
}

.info-card.right-card {
  width: 50%;
  height: 386px;
}

.info-card.bottom-card {
  width: 100%;
  height: 386px;
}

.divider {
  margin: 55px;
  height: 225px;
  border-left: #d0dae4 1px solid;
}

.info-card-title {
  font-family: 'PingFang', serif;
  font-size: 23px;
  padding-left: 35px;
  padding-top: 35px;
  color: #2971FF;
  line-height: 13px;
  font-weight: 600;
}

.info-card-content {
  display: flex;
  margin-left: 20px;
}

.sub-card {
  margin-top: 20px;
  margin-left: 20px;
  max-height: 206px;
}

.content-cockpit {
  display: flex;
  margin-top: 32px;
}

.sub-card-title {
  font-family: 'PingFang', serif;
  font-size: 18px;
  color: #000000;
  margin-top: 30px;
  margin-left: 5px;
  margin-bottom: 15px;
}

.sub-card-title::before {
  content: "•"; /* 使用Unicode字符表示圆点 */
  margin-right: 8px; /* 控制圆点和文本之间的间距 */
  color: #0080ff; /* 设置圆点的颜色 */
  font-size: 16px; /* 设置圆点的大小 */
}

.outer-container {
  width: 100%;
  height: 500px;
}
</style>